<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="css/yueke.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="underscore/underscore-min.js"></script>
    <script type="text/javascript" src="js/list_more.js"></script>
</head>
<body class="background_grey">
    <div class="header">
        <div class="header_in">
            <div class="header_logo">
                <h1></h1>
                <img src="images/index_log.jpg" /> 
            </div>
            <div class="header_nav">
                <ul>
                    <li><a href="model_news_list.html">前沿资讯</a></li>
                    <li><a href="model_problem_list.html">互动问答</a></li>
                    <li><a href="model_personage_center.html">帮助中心</a></li>
                </ul>
            </div>
            <div class="header_info">
                <div class="header_info_find"><a href="model_person_index.html">寻找合作伙伴</a></div>
                <div class="header_greet">
                    enzo，您好
                </div>
                <div class="header_register display_none">
                    <a href="#">登录</a>|
                    <a href="#">注册</a>
                </div>
                <div class="header_exit">
                    <a href="#">我的项目</a>|
                    <a href="#">退出</a>
                </div>
                <div class="header_become display_none">
                    <a href="#">成为我们的专家</a>
                </div>
            </div>
            <div class="clear_both"></div>
        </div>
    </div>
    <div class="personage_wrap">
        <div class="personage_nav">
            <div class="personage_nav_title">任务管理</div>
            <ul class="personage_nav_list">
                <li class="active item1">
                    <span></span>我的任务
                </li>
                <li class="item2">
                    <span></span>我的交易
                </li>
                <li class="item3">
                    <span></span>我的消息
                </li>
                <li class="item4">
                    <span></span>我的收支
                </li>
                <li class="item5">
                    <span></span>提现记录
                </li>
            </ul>
            <div class="personage_nav_title">账号安全</div>
            <ul class="personage_nav_list">
                <li class="item6">
                    <span></span>实名认证
                </li>
                <li class="item7">
                    <span></span>银行卡认证
                </li>
                <li class="item8">
                    <span></span>修改密码
                </li>
            </ul>
            <div class="personage_nav_title">个人资料</div>
            <ul class="personage_nav_list">
                <li class="item9">
                    <span></span>资料修改
                </li>
            </ul>
        </div>
        <div class="personage_main">
            <div class="personage_main_in">
                <div class="personage_main_top">
                    <div class="personage_main_top_portrait">
                        <img src="images/problem_list_img1.jpg" alt="" />
                    </div>
                    <div class="personage_main_top_info">
                        <div class="personage_main_top_name">
                            <span><i>ENZO</i><span>(136****5717)</span></span>
                            <em class="bank">未银行卡认证</em>
                            <em class="name">已实名认证</em>
                            <em>我是客户：</em>
                        </div>
                        <div class="personage_main_top_info_money">
                            <span>不可用余额：<i>¥0.00</i></span>
                            <span>可用余额：<i>¥0.00</i></span>
                            <span class="blue_btn last">在线充值</span>
                        </div>
                    </div>
                </div>
                <div class="personage_main_tab">
                    <ul class="personage_main_tab_list" id="tab_list">
                        <li class="personage_main_tab_item active">
                            <div>待发布</div>
                        </li>
                        <li class="personage_main_tab_item">
                            <div>待发布</div>
                        </li>
                        <li class="personage_main_tab_item">
                            <div>待发布</div>
                        </li>
                        <li class="personage_main_tab_item">
                            <div>待发布</div>
                        </li>
                        <li class="personage_main_tab_item">
                            <div>待发布</div>
                        </li>
                    </ul>
                </div>
                <div class="personage_main_list">
                    <ul id="personage_list">
                        <!-- <li class="personage_main_list_item">
                            <div class="personage_main_list_left">
                                <h3 class="personage_main_list_title">实现安卓系统向A4幅面多层单据的针式打印方案</h3>
                                <p class="personage_main_list_info">根据文档说明和UE设计，实现教育系统管理端的课程列表、创建课程和修改课程3个管理端页面和1个获取用户购买课程列表的接口，并完成指定测试用例的测试。</p>
                                <div class="personage_main_list_money">
                                    <span>涉及金额：<i>2000-5000</i></span>
                                    <span>投标有效期还剩：<i>已结束</i></span>
                                </div>
                            </div>
                            <div class="personage_main_list_right blue_btn">查看任务</div>
                        </li> -->
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="index_footer">
        <div class="index_footer_link">
            <a href="">新闻公告</a>|
            <a href="">关于我们</a>|
            <a href="">联系我们</a>|
            <a href="">用户协议</a>
        </div>
        <p class="index_footer_copy">Copyright©2016 yk-zb.com 粤科众包 版权所有 粤ICP备16027165号-1</p>
    </div>
    <script id="personageItem" type="text/template">
        <li class="personage_main_list_item">
            <div class="personage_main_list_left">
                <h3 class="personage_main_list_title"><#= title #></h3>
                <p class="personage_main_list_info"><#= detail #></p>
                <div class="personage_main_list_money">
                    <span>涉及金额：<i><#= money #></i></span>
                    <span>投标有效期还剩：<i><#= time #></i></span>
                </div>
            </div>
            <div class="personage_main_list_right blue_btn"><a href="">查看任务</a></div>
        </li>
    </script>
</body>
</html>
<script type="text/javascript">
    $(function() {
        var now = 0;
        function fnPaging(now){
            var attr = [{
                    time : '2016-05-23 21:09',
                    title : '111111111111111111111111',
                    detail : '网易云信全新推出T服务，独创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1技术顾问实时响应解决每个技术难题，让你不再惧怕上云',
                    time : '2小时前',
                    money : '已结束' 
                },{
                    time : '2016-05-23 21:09',
                    title : '222222222222222222222222222222',
                    detail : '网易云信全新推出T服务，独创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1技术顾问实时响应解决每个技术难题，让你不再惧怕上云',
                    time : '2小时前',
                    money : '已结束' 
                },{
                    time : '2016-05-23 21:09',
                    title : '3333333333333333333333333333333333',
                    detail : '网易云信全新推出T服务，独创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1技术顾问实时响应解决每个技术难题，让你不再惧怕上云',
                    time : '2小时前',
                    money : '已结束' 
                },{
                    time : '2016-05-23 21:09',
                    title : '4444444444444444444444444444444',
                    detail : '网易云信全新推出T服务，独创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1技术顾问实时响应解决每个技术难题，让你不再惧怕上云',
                    time : '2小时前',
                    money : '已结束' 
                },{
                    time : '2016-05-23 21:09',
                    title : '5555555555555555555555555555',
                    detail : '网易云信全新推出T服务，独创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1技术顾问实时响应解决每个技术难题，让你不再惧怕上云',
                    time : '2小时前',
                    money : '已结束' 
                },
                ];
                $('#personage_list').html('');
                for(var i = 0; i< 5; i++){
                        var t = _.template($("#personageItem").text());
                        var htmlTxt = t(attr[now]);
                        console.log(t,htmlTxt)
                        $('#personage_list').append(htmlTxt);
                    }
        };
        fnPaging(now);
        $('#tab_list li').mouseenter(function(){
            var index =$('#tab_list li').index(this);
            now = index;
            console.log(index)
            fnPaging(now)
        });
        $('.personage_main_tab_item ').mousemove(function(event) {
            $('.personage_main_tab_item ').removeClass('active');
            $(this).addClass('active');
        });
        /*左边导航*/
        (function fnTab(){
            for( var i = 0; i< $('.personage_nav li').length; i++){
                if($('.personage_nav li').eq(i).hasClass('active')){
                    console.log(i);
                    var index = i;
                }
            }

            $('.personage_nav li').hover(function() {
                $('.personage_nav li').eq(index).addClass('active');
                $(this).addClass('active');
            }, function() {
                $(this).removeClass('active');
                $('.personage_nav li').eq(index).addClass('active');
            });
                
        })();
    });
</script>